<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="format-detection" content="telephone=no">
        <title>FrozenUI Demo</title>
        <link rel="stylesheet" href="/public/static/css/frozen.css">
    </head>
    <body ontouchstart="">
        <section class="ui-container">
            <section id="tab">
            	<div class="demo-item">
            		<div class="demo-block">
            			<div class="ui-tab">
            			    <ul class="ui-tab-nav ui-border-b">
            			        <li class="current">热门推荐</li>
            			        <li>全部表情</li>
            			    </ul>
            			    <ul class="ui-tab-content" style="width:300%">
            			        <li>内容1</li>
            			        <li>内容2</li>
            			    </ul>
            			</div>
            		</div>
            	</div>
            </section>
        </section>
        <script src="/public/static/lib/zepto.min.js"></script>
        <script src="/public/static/js/frozen.js"></script>
        <script>
        (function (){
            var tab = new fz.Scroll('.ui-tab', {
                role: 'tab',
                autoplay: false,
                interval: 3000
            });
            /* 滑动开始前 */
            tab.on('beforeScrollStart', function(fromIndex, toIndex) {
                console.log(fromIndex,toIndex);// from 为当前页，to 为下一页
            })
        })();
        </script>
    </body>
</html>